<template>
    <el-dialog :title="titleMap[mode]" v-model="visible" :width="1300"  destroy-on-close @closed="$emit('closed')" align-center>
        <el-button type="primary" @click="print">打印</el-button>
        <el-button type="primary" color="#6074e8" @click="to_export">导出</el-button>
        <el-main class="printMain" ref="printMain">
            <div class="title">
                {{area_name}} {{contract_date[0]}} - {{contract_date[1]}} 销售均价(统计 {{total_number}} 匹)
            </div>
            <table border="1" style="border-collapse: collapse; width: 100%;">
                <thead>
                    <tr style="height:32px;line-height: 32px;">
                        <th class="table_border">品名</th>
                        <th class="table_border">最低价</th>
                        <th class="table_border">最高价</th>
                        <th class="table_border">总码数</th>
                        <th class="table_border">总匹数</th>
                        <th class="table_border">总货值</th>
                        <th class="table_border">均价/码</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item,index) in detail" :key="index" style="height:32px;line-height: 32px;">
                        <td class="table_border">{{item.goods_name}}</td>
                        <td class="table_border">{{item.min_price}}</td>
                        <td class="table_border">{{item.max_price}}</td>
                        <td class="table_border">{{item.total_code_number}}</td>
                        <td class="table_border">{{item.total_number}}</td>
                        <td class="table_border">{{item.total_price}}</td>
                        <td class="table_border">{{item.avg_price_per_code}}</td>
                    </tr>
                </tbody>
            </table>
            <!-- <el-table border :data="detail">
                <el-table-column label="品名" prop="goods_name"></el-table-column>
                <el-table-column label="最低价" prop="min_price"></el-table-column>
                <el-table-column label="最高价" prop="max_price"></el-table-column>
                <el-table-column label="总码数" prop="total_code_number"></el-table-column>
                <el-table-column label="总匹数" prop="total_number"></el-table-column>
                <el-table-column label="总货值" prop="total_price"></el-table-column>
                <el-table-column label="均价/码" prop="avg_price_per_code"></el-table-column>
            </el-table> -->
        </el-main>
	</el-dialog>
</template>

<script>
import print from '@/utils/print'
export default {
	emits: ['success', 'closed'],
	data() {
		return {
			dialog: {
				client: false
			},
			mode: "add",
			titleMap: {
				print: '打印',
			},
			visible: false,
            detail: [],
            contract_date: "",
            total_number: 0,
            area_name: "",
		}
	},
	mounted() {
	},
	methods: {
        print(){
            print(this.$refs.printMain)
            setTimeout(()=>{
                this.visible = false
            },500)
        },
		//显示
		open(mode = 'add') {
			this.mode = mode;
			this.visible = true;
			return this
		},
        async setData(data) {
            this.contract_date = data
            var res = await this.$API.business.sale.saleAveragePriceData.get({contract_date: data});
            this.detail = res.data.data;
            this.total_number = res.data.heji.total_number
            this.area_name = res.data.heji.area_name
        },
        async to_export(){
            var res = await this.$API.business.sale.saleAveragePrice.get({contract_date: this.contract_date})
            if (res.code == 1) {
				this.$message.success("导出成功");
				window.location.href = res.data.url
			} else {
				this.$alert(res.message, "提示", {type: "error"});
			}
        },
	}
}
</script>

<style lang="scss" scoped>
.title {
    font-size: 26px;
    text-align: center;
    font-weight: bold;
    margin: 10px;
}
.table_border{
    min-width: 120px;
}
td{
    text-align: center;
}
table{
    font-size: 12px !important;
    tbody{
        tr {
            page-break-inside: avoid;
            -webkit-region-break-inside: avoid; 
        }
        tr:last-child{
            page-break-after: avoid;
            
        }
    }
} 
</style>
